<template>
  <div class="header">
    <a href="#/">
      <img src="../assets/mylogo.png" alt="" width="50px" />
      <span class="company">Ardai会员管理系统</span>
    </a>
    <el-dropdown @command="handleCommand" class="el-dropdown">
      <span class="el-dropdown-link">
        {{user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item icon="el-icon-plus" command="a"
          >修改密码</el-dropdown-item
        >
        <el-dropdown-item icon="el-icon-circle-plus" command="b"
          >退出登陆</el-dropdown-item
        >
      </el-dropdown-menu>
    </el-dropdown>  
    <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="400px">
      <el-form ref="formpwd" :model="pojo" status-icon :rules="rule" style="width:300px;padding-left:30px">
          <el-form-item prop="oldpwd" label="原密码" >
          <el-input type="password" v-model="pojo.oldpwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="newpwd" label="新密码" >
          <el-input type="password" v-model="pojo.newpwd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="checkpwd" label="确定密码" >
          <el-input type="password" v-model="pojo.checkpwd" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update('formpwd')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { logout } from "@/api/login";
import passwordApi from '@/api/password'
export default {
  data() {
    //在 return 上面声明自定义校验器
    //校验原密码是否正确
    const validateOldPass = (rule,value,callback)=>{
        passwordApi.checkPwd(this.user.id,value).then(res=>{
          const result = res.data;
          if(result.flag){
            //校验原密码成功
            callback();
          }else{
            callback(new Error(result.msg));
          }
        })
    };
    //校验输入的2次密码是否一致
    const validateNewPass = (rule,value,callback)=>{
      if(value !== this.pojo.newpwd){
        callback(new Error("两次输入的密码不一致!"));
      }else{
        callback();
      }
    }
    return {
      dialogFormVisible: false,
      pojo:{
        oldpwd:"",
        newpwd:"",
        checkpwd:"",
      },
      user: JSON.parse(window.localStorage.getItem("ardai-msm-user")) ,
      rule:{
        oldpwd:[
          {required: true,message: "请输入原密码",trigger: "blur"},
          { validator: validateOldPass, trigger: 'blur' }
        ],
        newpwd:[
          {required: true,message: "请输入新密码",trigger: "blur"},
        ],
        checkpwd:[
          {required: true,message: "请再输入一次",trigger: "blur"},
          { validator: validateNewPass, trigger: 'change' }
        ],
      },
    };
  },
  methods: {
    //修改密码的弹窗
    update(formName){
      this.$refs[formName].validate(valid=>{
        if(valid){
          console.log("校验成功");
          passwordApi.updatePwd(this.user.id,this.pojo.newpwd).then(res=>{
            const result = res.data;
            if(result.flag){
              this.dialogFormVisible = false;
              this.$message(result.msg);
              //修改密码后退出进行重新登陆
              this.handlerLogout();
            }else{
              this.$message(result.msg)
            }
          })
        }else{
          return false;
        }
      })
    },
    handlerLogout(){
                const token = window.localStorage.getItem("ardai-msm-token");
          logout(token).then((res) => {
            const result = res.data;
            if (result.flag) {
              //退出登陆成功删除本地存储的token和用户信息
              window.localStorage.removeItem("ardai-msm-token");
              window.localStorage.removeItem("ardai-msm-user");
              //退出以后跳转到登陆页面
              this.$router.push("/login");
            } else {
              //退出失败进行消息提示
              this.$message({
                type: "error",
                message: result.msg,
              });
            }
          });
    },
    handleCommand(command) {
      switch (command) {
        case "a":
          this.dialogFormVisible = true;
          break;

        case "b":
          // this.$message("点击了退出登陆");
          this.handlerLogout();
          break;
      }
    },
  },
};
</script>
<style scoped>
img {
  padding-left: 50px;
  padding-right: 10px;
  vertical-align: middle;
}
.company {
  position: absolute;
  color: white;
  font-size: larger;
}
.el-dropdown {
  float: right;
  margin-right: 30px;
}
.el-dropdown-link {
  color: white;
  cursor: pointer;
}
</style>